import { defineComponent, watch, ref, onMounted, toRefs } from 'vue'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // const { xdata, data1, data2 } = toRefs(props.cdata.value)
    // 配置项
    let options = {
      title: {
        text: '主要能源发电装机量占比', // 主标题文本
        // subtext: '副标题', // 副标题文本
        left: 'center', // 标题水平位置：'left'/'center'/'right'
        top: '40', // 标题垂直位置
        textStyle: {
          color: '#fff', // 主标题文字颜色
          fontSize: 40 // 主标题文字大小
          // fontWeight: 'bold' // 主标题文字粗细
        }
        // subtextStyle: {
        //   color: '#ccc', // 副标题文字颜色
        //   fontSize: 30 // 副标题文字大小
        // },
        // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        show: false
      },
      grid: {
        top: '20%', // 增加这个值会增加标题与图表的距离
        left: '4%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff', // 设置y轴刻度字体颜色为深青色
          fontSize: 28
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: false // 不显示 y 轴线
        },
        type: 'category',
        data: ['2024', '2023', '2022', '2021', '2020'],
        axisLabel: {
          color: '#fff', // 设置y轴刻度字体颜色为深青色
          fontSize: 28
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name: '火力',
          type: 'bar',
          barWidth: '40%',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [40, 43, 45, 48, 50],
          itemStyle: {
            color: '#FEBC27' // 自定义颜色
          }
        },
        {
          name: '水力',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [22, 25, 22, 22, 22],
          itemStyle: {
            color: '#36AEC9' // 自定义颜色
          }
        },
        {
          name: '核电',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [5, 5, 5, 8, 10],
          itemStyle: {
            color: '#BB4D22' // 自定义颜色
          }
        },
        {
          name: '新能源',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [33, 27, 28, 22, 18],
          itemStyle: {
            color: '#4791F0' // 自定义颜色
          }
        }
      ]
    }

    onMounted(() => {
      if (chartRef.value) {
        chartRef.value.initChart(options)
      }
    })

    return () => {
      const height = '100%'
      const width = '100%'
      return <echart ref={chartRef} height={height} width={width} />
    }
  }
})
